<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
       html, body, #map_canvas {
         margin: 0; 
         padding: 0; 
         height: 100%; 
      } 
      #skel-panels-pageWrapper {
      	 height: 100%;
      }
     
    </style>
    <link rel="stylesheet" href="css/skel-noscript.css" />
	<link rel="stylesheet" href="css/style.css" />
	<link rel="stylesheet" href="css/style-wide.css" />
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
	<script type="text/javascript" src='script/jquery-1.11.0.min.js'></script>
	<script type="text/javascript" src='script/ajax.util.js'></script>
	<script type="text/javascript" src='script/ajax.index.js'></script>
	<script type="text/javascript" src="script/jquery.cookie.js"></script>	
	<script type="text/javascript" src="script/label.js"></script>
	<script type="text/javascript" src="js/skel.min.js"></script>
	<script type="text/javascript" src="js/skel-panels.min.js"></script>
	<script type="text/javascript" src="js/init.js"></script>
	<script type="text/javascript" src="script/ajax.map.js"></script>
	<link rel="stylesheet" type="text/css" media="all" href="css/form/style1.css">
    <script>
		google.maps.event.addDomListener(window, 'resize', initMap);
		google.maps.event.addDomListener(window, 'load', initMap);
    </script>
      
  </head>
  <body>

		<!-- Header -->
			<div id="header" class="skel-panels-fixed">

		<div class="top">
			<!-- Social Icons -->
			<ul class="icons">
				<li><a href="#" class="fa fa-cog solo"><span>Twitter</span></a></li>
				<li><a href="#" class="fa fa-facebook solo"><span>Facebook</span></a></li>
				<li><a href="#" class="fa fa-github solo"><span>Github</span></a></li>
				<li><a href="#" class="fa fa-dribbble solo"><span>Dribbble</span></a></li>
				<li><a href="#" class="fa fa-envelope solo"><span>Email</span></a></li>
			</ul>
			<div id="search">
				<section class="is-search">
					<form method="post" action="#">
						<input type="text" class="text" name="search" placeholder="Search" />
					</form>
				</section>
				

			</div>
			<!-- Logo -->
			<div id="logo">
				<span class="image avatar48"><img id="avatar" 
					alt="" /></span>
				<h1 id="username"></h1>
				<span id="account" class="byline"></span>
			</div>
			
			<!-- Nav -->
			<nav id="nav">

				<ul>
					<li><a href="#top" id="top-link" onclick="showContent('map')"
						class="skel-panels-ignoreHref"><span class="fa fa-home">Map</span></a></li>
					<li><a href="#portfolio" id="portfolio-link"
						class="skel-panels-ignoreHref"><span class="fa fa-th">Friends</span></a></li>
					<li><a href="#contact" id="contact-link"
						class="skel-panels-ignoreHref"><span class="fa fa-envelope">Messages</span></a></li>
					<li><a href="#about" id="about-link" onclick="showContent('about')"
						class="skel-panels-ignoreHref"><span class="fa fa-user">About
								Me</span></a></li>

				</ul>
			</nav>
			
		</div>
	</div>
	<div id="main" style="display: none">
		<section id="about" class="four">
			<div class="container">
				<header>
					<h2>About</h2>
				</header>
				<form name="user-update-form" id="user-update-form" method="post">
					<input type="hidden" id="phone" name="phone">
					<div class="message" id="user-show-message" style="display:block; color: red"></div>
					<div>
						<label>
							<span>Firstname:</span>
							<input placeholder="Firstname" type="text" tabindex="1" required autofocus id="firstname" name="firstname">
						</label>
					</div>
					<div>
						<label>
							<span>Lastname:</span>
							<input placeholder="Lastname" type="text" tabindex="1" required autofocus id="lastname" name="lastname">
						</label>
					</div>
					<div>
						<label>
							<span>Work and Education:</span>
							<input placeholder="eg. phonemap.com" type="text" tabindex="1" required autofocus id="workAndEducation" name="workAndEducation">
						</label>
					</div>
					<div>
						<label>
							<span>Live:</span>
							<input id="live" name="live" placeholder="Place living" type="text" tabindex="1" required autofocus>
						</label>
					</div>
					<div>
						<label>
							<span>Birth Date:</span>
							<input id="birthdate" name="birthdate" placeholder="MM/DD" type="text" tabindex="1" required autofocus>
						</label>
					</div>
					<div>
						<label>
							<span>Birth Year:</span>
							<input id="birthyear" name="birthyear" placeholder="YYYY" type="text" tabindex="1" required autofocus>
						</label>
					</div>
					<div>
						<label>
							<span>Interested in:</span>
							<select id="interestedIn" name="interestedIn">
								<option value="-1">---</option>
								<option value="0">All</option>
								<option value="1">Men</option>
								<option value="2">Women</option>
							</select>
						</label>
					</div>
					<div>
						<label>
							<span>Relationship status:</span>
							<select id="relationshipStatus" name="relationshipStatus">
							<option value="0">---</option>
							<option value="1">Single</option>
							<option value="2">In a relationship</option>
							<option value="5">Engaged</option>
							<option value="4">Married</option>
							<option value="3">In an open relationship</option>
							<option value="6">It's complicated</option>
							<option value="8">Separated</option>
							<option value="9">Divorced</option>
							<option value="7">Widowed</option>
							</select> 										
							
						</label>
					</div>
					<div>
						<label>
							<span>Email:</span>
							<input id="email" name="email" placeholder="Please enter your email address" type="email" tabindex="2" required>
						</label>
					</div>
					<div>
						<label>
							<span>Mobile Phone:</span>
							<input id="mobilePhone" name="mobilePhone" placeholder="Please enter your number" type="tel" tabindex="3" required>
						</label>
					</div>
					<div>
						<label>
							<span>Website:</span>
							<input id="website" name="website" placeholder="Begin with http://" type="url" tabindex="4" required>
						</label>
					</div>
					<div>
						<label>
							<span>Introduction:</span>
							<textarea id="introduction" name="introduction" placeholder="Include all the details you can" tabindex="5" required></textarea>
						</label>
					</div>
					<div>
						<button name="submit" type="button" id="contact-submit" class="button submit"
									onclick="validateProfile('user')">Save</button>
					</div>
				</form>
			</div>
		</section>
		
	</div>
	<div id="map_canvas"></div>
			
	</body>
</html>